<template>
    <div class="box">
        <div class="boxHeader">标题文本</div>
        <div class="content">
            <div class="titleText">
                <TextInput v-bind:name="'标题'" v-bind:value="data?.title1" @titleChange="(text)=>$emit('titleChange','title1',text)"/> 
                <TextInput v-bind:name="'副标题'" v-bind:value="data?.title2" @titleChange="(text)=>$emit('titleChange','title2',text)"/> 
            </div>
            <div class="styleChange">
                <FontChange v-bind:data="{name:'显示位置',data:[{name:'居左',value:'left'},{name:'居中',value:'center'}],selected:data?.position}" @titleChange="(value)=>$emit('titleChange','position',value)"/>
                <FontChange v-bind:data="{name:'标题大小',data:[{name:'16号',value:'16px'},{name:'14号',value:'14px'},{name:'12号',value:'12px'}],selected:data?.size1}" @titleChange="(value)=>$emit('titleChange','size1',value)"/>
                <FontChange v-bind:data="{name:'副标题大小',data:[{name:'12号',value:'12px'},{name:'14号',value:'14px'},{name:'16号',value:'16px'}],selected:data?.size2}" @titleChange="(value)=>$emit('titleChange','size2',value)"/>
                <FontChange v-bind:data="{name:'标题加粗',data:[{name:'加粗体',value:'bold'},{name:'常规体',value:'normal'}],selected:data?.weight}" @titleChange="(value)=>$emit('titleChange','weight',value)"/>
                <ColorChange v-bind:data="{name:'标题颜色',initialValue:'#000',selected:data?.titleColor1}" @color-chnage="value=>$emit('titleChange','titleColor1',value)"/>
                <ColorChange v-bind:data="{name:'副标题颜色',initialValue:'#EEE',selected:data?.titleColor2}" @color-chnage="value=>$emit('titleChange','titleColor2',value)"/>
                <ColorChange v-bind:data="{name:'背景颜色',initialValue:'#FFF',selected:data?.backgroundColor}" @color-chnage="value=>$emit('titleChange','backgroundColor',value)"/>
            </div>
            <div>
                <RadioInput v-bind:data="{name:'底部分割线',info:'显示',selected:data.divider}" @radio-change="$emit('radioChange','divider')"/>
                <RadioInput v-bind:data="{name:'查看更多',info:'不显示',selected:data.more}" @radio-change="$emit('radioChange','more')"/>
                <RadioInput v-bind:data="{name:'标题图标',info:'不显示',selected:data.icon}" @radio-change="$emit('radioChange','icon')"/>
            </div>
        </div>
    </div>
</template>

<script setup>
import ColorChange from './ColorChange.vue';
import FontChange from './FontChange.vue';
import TextInput from './TextInput.vue';
import RadioInput from './RadioInput.vue';
import { watchEffect } from 'vue';

const props = defineProps(['data'])
watchEffect(()=>console.log(props.data))
</script>

<style scoped>
    .box{
        width: 29%;
        margin-left: 14%;
        height: 100%;
        background-color: #fff;
        box-shadow: 0 0 3px  #ccc;
    }

    .boxHeader{
        height: 5vh;
        line-height: 5vh;
        padding-left: 1vw;
        border-bottom: 1px solid #eee;
        font-size: 14px;
    }

    .content{
        padding:0  1vw;
    }

    .titleText{
        border-bottom: 1px dashed #eee;
        padding-top: 4vh;
    }

    .styleChange{
        padding-top: 1.5vh;
        border-bottom: 1px dashed #eee;
        padding-bottom: 1vh;
    }
</style>